import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Modal, Button, Select, Form, Input, DatePicker } from 'antd';
import { useState } from 'react';

const { Option } = Select;


const Add = ({ isshowAdd, setAdd }) => {
  const [isEditlVisible, setEdit] = useState(false);
  const [addData, setData] = useState({});
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  const changeData = (e, value, name) => {
    let obj = addData;
    console.log(value)
    if (e.target) {
      obj[name] = e.target.value;
    } else if (value.value) {
      obj[name] = value.value;
    } else {
      obj[name] = value;
    }
    setData(obj);
    console.log(addData)
  }
  const submitData = () => {
    console.log(addData)
  };
  return <div className="Addmain2" style={{ display: !isshowAdd ? 'none' : 'block' }}>
    <Modal visible={isEditlVisible} onOk={() => { setAdd(false); setEdit(false); setData({}); onReset(); }} onCancel={() => { setEdit(false) }} width={250} cancelText='取消' okText='确定' style={{ top: '40%' }}>
      <div><ExclamationCircleOutlined style={{ color: 'rgb(255,153,0)' }} /><span>您确认关闭此页面吗？</span></div>
    </Modal>
    <div className="titleTop">
      <div></div>
      <p>资源信息新增</p>
      <CloseOutlined className='close' onClick={() => { setEdit(true) }} />
    </div>
    <Form autoComplete="off" form={form}>
      <div className='dataBar'>
        <div className='titleTop'>资源信息</div>
        <div className='com'>
          <div className='com1'>
            <Form.Item
              label="资源名称"
              name="resourceName"
              rules={[{ required: true, message: '请输入告警名称' }]}
            >
              <Input style={{ width: '525px' }} placeholder='请输入告警名称' onChange={(e, value) => { changeData(e, value, 'resourceName') }} value={addData.resourceName} />
            </Form.Item>
            <Form.Item
              label="资源类型"
              name="resourceType"
              rules={[{ required: true, message: '请输入项目编号' }]}
            >
              <Select placeholder="请选择" style={{ width: 180 }} onChange={(e, value) => {
                changeData(e, value, 'resourceType')
              }}>
                <Option value="子系统">子系统</Option>
                <Option value="功能点">功能点</Option>
                <Option value="虚拟节点">虚拟节点</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="上级节点"
              name="parentNode"
              rules={[{ required: true, message: '请输入项目编号' }]}
            >
              <Select placeholder="请选择" style={{ width: 180 }} onChange={(e, value) => {
                changeData(e, value, 'parentNode')
              }}>
                <Option value="综合应用层">综合应用层</Option>
                <Option value="一级应用层">一级应用层</Option>
                <Option value="二级应用层">二级应用层</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="资源url"
              name="resourceUrl"
              rules={[{ required: true, message: '请输入项目类型' }]}
            >
              <Input style={{ width: '540px' }} placeholder='请输入告警名称' onChange={(e, value) => { changeData(e, value, 'resourceUrl') }} value={addData.resourceUrl} />
            </Form.Item>
          </div>
        </div>
      </div>
      <Form.Item wrapperCol={{ offset: 10, span: 16 }} style={{ marginBottom: 0 }}>
        <Button type="primary" htmlType="submit" onClick={submitData}>
          保存
        </Button>
        <Button onClick={onReset}>
          重置
        </Button>
      </Form.Item>
    </Form>

  </div>
}

export default Add;